<template>
  <div class="announce-container">
    <div class="app-container">
      <el-card class="box-card">

        <!-- 页头 -->
        <div
          slot="header"
          class="clearfix"
        >
          <span>公告管理</span>
          <div class="form">

            <div class="add">
              <el-form
                :inline="true"
                :model="queryForm"
                class="query-form"
                :rules='queryFormRules'
              >
                <el-form-item prop='title'>
                  <el-input
                    v-model.trim="query.title"
                    clearable
                    placeholder="请输入标题关键字"
                    @keyup.enter.native="getQueryFn()"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="warning"
                    @click="getQueryFn()"
                  >查询</el-button>
                </el-form-item>
              </el-form>
              <el-button
                type="primary"
                @click="addAnnounceFn()"
              >添加公告</el-button>
            </div>
          </div>
        </div>

        <!-- 筛选 -->
        <div class="screen">
          <el-form
            inline
            :model="query"
          >
            <el-form-item
              label="公告范围"
              prop="scope"
            >
              <el-select
                filterable
                clearable
                v-model="query.scope"
                placeholder="请选择范围"
              >
                <el-option
                  label="暂不发布(草稿)"
                  value='4'
                ></el-option>
                <el-option
                  label="全可见"
                  value='3'
                ></el-option>
                <el-option
                  label="仅学生可见"
                  value='2'
                ></el-option>
                <el-option
                  label="仅维修人员可见"
                  value='1'
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="getAnnounceListFn()"
              >提交</el-button>
              <el-button @click="screenResetFn()">重置</el-button>
            </el-form-item>
          </el-form>

        </div>

        <!-- 表格组件 -->
        <div
          class="table"
          style="height:80%"
        >
          <el-table
            :data="announceList"
            style="width: 100%"
          >
            <el-table-column
              type="index"
              label="序号"
              min-width='50px'
            >
            </el-table-column>
            <el-table-column
              prop="title"
              label="标题"
              min-width='200px'
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="scope"
              label="发布范围"
              min-width='120px'
            >
              <template v-slot="{row}">
                <span v-if="row.scope === 3">全可见</span>
                <span v-else-if="row.scope === 4">暂不发布(草稿)</span>
                <span v-else-if="row.scope === 1">仅学生可见</span>
                <span v-else-if="row.scope === 2">仅维修人员可见</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="ctime"
              label="发布时间"
              min-width='135px'
            >
              <template v-slot="{row}">
                {{new Date(row.ctime).toLocaleString()}}
              </template>
            </el-table-column>
            <el-table-column
              prop="job_number"
              label="发布人工号"
              min-width='80px'
            >
            </el-table-column>
            <el-table-column
              label="操作"
              width='140x'
              fixed='right'
            >
              <template v-slot="{row}">
                <el-button
                  circle
                  size="mini"
                  icon="el-icon-search"
                  @click="rowInfoFn(row)"
                ></el-button>
                <el-button
                  type="primary"
                  circle
                  icon="el-icon-edit"
                  size="mini"
                  @click="rowUpdateFn(row)"
                ></el-button>
                <el-popconfirm
                  title="确定删除该公告吗？"
                  @confirm="rowDeleteFn(row)"
                >
                  <el-button
                    slot="reference"
                    type="danger"
                    circle
                    icon="el-icon-delete"
                    size="mini"
                  ></el-button>
                </el-popconfirm>

              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 分页组件 -->
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 60px; margin-top: 40px;"
          v-if="total > query.pagesize"
        >
          <!-- 分页区域 -->
          <el-pagination
            :current-page="query.page"
            :page-sizes="[10, 15, 20, 25]"
            :page-size="query.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            hide-on-single-page
          />
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getAnnounceListAPI, deleteAnnounceAPI, queryAnnounceAPI } from '@/api'
export default {
  name: 'announceList',
  computed: {
    ...mapGetters(['userInfo'])
  },
  data () {
    return {
      queryForm: {
        title: ''
      },
      query: {
        page: 1, // 页码
        pagesize: 10, // 每页条数

        scope: ''
      }, // 获取列表数据
      queryFormRules: {
        title: [
          {
            min: 1,
            max: 50,
            type: 'string',
            message: '标题要求1-50个数字',
            trigger: 'blur'
          }
        ]
      },
      announceList: [], // 公告信息列表
      total: 0, // 总数
      dialogInfoVisible: false, // 信息展示 dialog 控制
      dialogUpdateVisible: false, // 修改信息 dialog 控制
      announceInfo: {}, // dialog 数据
      announceRules: {
        title: [
          { required: true, message: '标题不能为空', trigger: 'blur' },
          {
            min: 1,
            max: 50,
            type: 'string',
            message: '标题要求1-50个数字',
            trigger: 'blur'
          }
        ],
        content: [
          { required: true, message: '内容不能为空', trigger: 'blur' },
          {
            min: 1,
            max: 20000,
            type: 'string',
            message: '内容字符20000内',
            trigger: 'blur'
          }
        ]
      }, // dialog 数据验证
      isAdd: false // 是否是添加操作
    }
  },
  async created () {
    setTimeout(await this.getAnnounceListFn(), 1000 * 60)
  },
  methods: {
    // 每页显示的条数发生改变时触发
    handleSizeChange (newSize) {
      this.query.size = newSize
      this.getAnnounceListFn() // 获取公告列表
    },
    // 当前页面发生改变时触发
    handleCurrentChange (newPage) {
      this.query.page = newPage
      this.getAnnounceListFn() // 获取公告列表
    },
    // 获取公告列表 -> 发送请求
    async getAnnounceListFn () {
      try {
        const { success, code, data } = await getAnnounceListAPI({
          ...this.query,
          scope: this.query.scope - 0
        })
        if (success && code === 10000) {
          this.announceList = data.row
          this.total = data.total
        }
      } catch (err) {
        return console.dir(err)
      }
    },
    // 点击查看 -> 展示数据详情
    rowInfoFn (row) {
      this.$router.push({
        path: `/announce_manage/info/${row.id}`
      })
    },
    // 点击修改 -> 展示数据 -> 修改
    rowUpdateFn (row) {
      this.$router.push({
        path: `/announce_manage/update/${row.id}`
      })
    },
    // 点击删除 -> 删除该公告
    async rowDeleteFn (row) {
      try {
        const { success, code } = await deleteAnnounceAPI(row.id)
        if (success && code === 10000) {
          success && this.getAnnounceListFn()
        }
      } catch (err) {
        return console.dir(err)
      }
    },
    // 根据输入title模糊查询
    async getQueryFn () {
      try {
        const { success, code, data } = await queryAnnounceAPI({
          ...this.queryForm,
          ...this.query
        })
        if (success && code === 10000) {
          this.announceList = data.row
          this.total = data.total
        }
      } catch (err) {
        return console.dir(err)
      }
    },
    // 点击添加按钮
    addAnnounceFn () {
      this.$router.push('/announce_manage/add')
    },
    // 清空筛选数据 -> 重新获取列表
    screenResetFn () {
      this.query = this.$options.data().query
      this.getAnnounceListFn()
    }
  }
}
</script>

<style lang="less" scoped>
.clearfix {
  display: flex;
}
.form {
  text-align: right;
  flex-grow: 1;
}
.title {
  flex-grow: 0;
}
.form {
  display: flex;
  justify-content: right;
}
.screen {
  display: flex;
}
</style>
